<template>
    <l-fullscreen-dialog :visible.sync="formVisible" :height="600" :width="1000" @close="handleCloseForm" :showOk="true"
        @opened="handleOpenedForm" ref="lrDialog" @ok="handleCommit">
        <template #title class="header">
            <h3>进度填报</h3>
        </template>
        <l-table-edit class="table-edit" ref="TableEdit" :tableColumns="progressTableColmuns" :tableData="tableData"
            @table="tableFunc" />
    </l-fullscreen-dialog>
</template>
<script>
import {
    progressTableData, progressTableColmuns, progressApi
} from "./columns";
export default {
    components: {
    },
    props: {
        formEdit: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            formHeight: 44,
            tableLoading: true,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: "1",
            tablePageSize: "50",
            progressTableData,
            progressTableColmuns,
            tableBtns: [
                { prop: 'Edit', label: '编辑' },
                { prop: 'Delete', label: '删除' },
            ],
            formVisible: false,
            formTitle: '',
            formEditRow: null,
            // formEdit: false,
        };
    },
    computed: {
        typesOptions() {
            return this.lr_dataItemOptions(this.lr_dataItem["types"]);
        },
    },
    mounted() {
    },
    methods: {
        tableFunc(res) {
            switch (res.type) {
                case 'save':
                    this.handleSave(res.data)
                    break;
                case 'delete':
                    this.handleDeleteRow(res.data, res.index)
                    break;
                case 'push':
                    this.tableData.push({
                        attachment: '',
                        landId: this.progressTableData.id,
                        materialDate: '',
                        materialDateQRange: '',
                        materialName: '',
                        materialPage: '',
                        materialTypeCode: '',
                        remark: '',
                        scheduleDate: '',
                        scheduleDateQRange: '',
                        stageCode: '',
                        isEditing: true,
                    })
                    break;
                default:
                    break;
            }
        },
        handleDeleteRow(row, index) {
            this.$confirm(this.$t('是否删除该条数据?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(async () => {
                // 正常情况因为新增和修改都重新加载了数据，所以row.id必存在
                // 特殊情况输入框还处于input框状态用户点击删除，不需要发送数据，重新获取数据即可清除
                row.id ? await progressApi.remove(row.id) : "";
                this.$message({
                    type: 'success',
                    message: this.$t('删除成功!')
                })
                // 刷新页面，重新获取新数据
                this.loadTableData()
                this.refresh()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('已取消删除!')
                })
            })
        },
        async handleSave(data) {
            if (!data.scheduleDate) {
                this.$message({
                    type: "error",
                    message: "请填入合法字段"
                })
            } else {
                if (data.id) { // 修改 data身上是否有id
                    let res = await progressApi.update(data.id, data);
                    if (res.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: '修改成功',
                        })
                        this.$refs.TableEdit.handleCloseEdit(data)
                        this.loadTableData()
                        this.refresh()
                    } else {
                        this.$message({
                            type: "error",
                            message: '修改失败',
                        })
                    }
                } else { // 新增
                    let res = await progressApi.add(data);
                    if (res.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: '新增成功',
                        })
                        this.$refs.TableEdit.handleCloseEdit(data)
                        this.loadTableData()
                        this.refresh()
                    } else {
                        this.$message({
                            type: "error",
                            message: '新增失败',
                        })
                    }
                }
            }
        },
        // 点击资料名称的回调
        handleDetails() {

        },
        async open(row = {}, options = {}) {
            this.progressTableData = Object.assign({}, progressTableData, row);
            // console.log("🚀 ~ this.progressTableData:", this.progressTableData)
            this.formVisible = true;
            this.loadTableData();
            this.$nextTick(() => {
                // this.$refs.landForm.clearValidate();
            });
        },
        handleCancel() {
            this.formVisible = false;
        },
        async handleCommit() {
            let isNotSaved = this.tableData.length && this.tableData.some(i => i.isEditing === true)
            if (isNotSaved === true) {
                this.$message({
                    type: 'error',
                    message: '当前有未保存的数据，请保存后再操作'
                })
                return;
            }
            this.refresh()
            this.formVisible = false;
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let requestConfig = {
                rows: this.tablePageSize,
                page: this.tableCurrentPage,
                landId: this.progressTableData.id
            }
            let data = await this.$awaitWraper(progressApi.getPage(requestConfig));
            if (data.rows.length !== 0) {
                this.tableData = data.rows
                this.tableData.forEach(i => {
                    this.$set(i, "isEditing", false)
                })
                this.tableTotal = data.records
            }
            else {
                this.tableTotal = 0
                this.tableData = []
            }
            this.tableLoading = false
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading("加载数据中...");
                hideLoading();
            }
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        filterBtns(row, btns) {
            return btns
        },
        refresh() {
            this.$emit("refresh");
        },
        handleCloseForm() {
            this.formVisible = false;
        },
    },
};
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
}

::v-deep .el-dialog__body {
    padding: 10px;
}

.dialog-container {
    overflow: auto;
}

::v-deep {
    .table-edit {
        height: 100%;
    }

    .el-table {
        height: calc(100% - 100px);
        // overflow-y: auto;
    }

    .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow-y: auto;
    }

}
</style>
